<template>
  <div class="rightArea" :style="cRightAreaStyle">
    <div class="header">
      <div class="headerR">
        <div class="icon triangle-icon"></div>
        <div class="title" :style="cTitleStyle">{{ rightTitle }}</div>
      </div>
      <div v-if="isLeftTitle" class="headerL" @click="handClick(leftTitle)">
        <Icon type="icon-tianjia2"></Icon>
      </div>
    </div>
    <slot name="content">rightArea</slot>
  </div>
</template>

<script>
export default {
  name: "RightArea",
  props: {
    rightTitle: {
      type: String,
      default: "标题"
    },
    leftTitle: {
      type: String,
      default: "编辑"
    },
    titleStyle: {
      type: Object,
      default: () => ({})
    },
    isLeftTitle: {
      type: Boolean,
      default: false
    },
    areaHeight: {
      type: Number,
      default: 240
    }
  },
  data () {
    return {
      defaultTitleStyle: {
        // color: '#ff6262',
        fontSize: "14px",
        fontWeight: "bold"
      }
    };
  },
  computed: {
    cTitleStyle () {
      return Object.assign(this.defaultTitleStyle, this.titleStyle);
    },
    cRightAreaStyle () {
      return {
        height: this.areaHeight + "px"
      };
    }
  },
  methods: {
    handClick (txt) {
      this.$emit("click", txt);
    }
  }
};
</script>

<style lang="less" scope>
.triangle {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  .borderColor(border-left-color);
  top: 1px;
}
.rightArea {
  width: 100%;
  // height: 240px;
  background-color: #ffffff;
  padding: 0 10px;
  margin-bottom: 5px;
  overflow: hidden;
  .header {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ebe9f3;
    .headerR {
      display: flex;
      position: relative;
      .triangle-icon {
    position: relative;
    width: 2px;
    height: 17px;
    .bgColor();
    top: 4px;
    display: inline-block;
    margin-right: 5px;
  }
      .title {
        .color();
        position: relative;
        left: 20px;
      }
    }
    .headerL {
      cursor: pointer;
    }
    .icon {
      position: absolute;
      left: 5px;
    }
  }
}
.rightArea:last-child {
  margin-bottom: 0;
}
</style>